<script setup lang="ts">
// 1. 引入axios
import axios from "axios";
import { ref, onMounted } from "vue";
// 2. 使用
const list = ref<Channel[]>([])

// ctrl+Shift+Alt+s
interface RootObject {
  data: Data;
  message: string;
} 

interface Data {
  channels: Channel[];
}

interface Channel {
  id: number;
  name: string;
}


onMounted(async () => {
  const result = await axios.request<RootObject>({ url:'http://geek.itheima.net/v1_0/channels'})
  // console.log(result.data.data.channels);
  list.value = result.data.data.channels
  
})


// 2.完成切换效果
defineProps<{ channelId: number }>()

// 3. 完成点击事件(向父亲传参)
const emit= defineEmits<{ (e: 'changeChannel', id: number): void }>()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active: channelId === item.id }" href="javascript:;" v-for="(item, i) in list" :key="item.id" @click="emit('changeChannel', item.id)">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>